<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
</head>
<body>
<div id="root">
  
</div>
</body>
<script src="../../lib/react/react.development.js"></script>
<script src="../../lib/react/react-dom.development.js"></script>
<script src="../../lib/react/babel.min.js"></script> <!--jsx -->
<script type="text/babel">
  
  
  function UserGreeting() {
    return <h1>welcome back!</h1>;
  }
  
  function GuestGreeting() {
    return <h1>please sing up!</h1>;
  }

  function Greeting(props) {
    const isLogin = props.isLogin;
    if(isLogin){
      return <UserGreeting/>
    }else {
      return <GuestGreeting/>
    }
  }

  ReactDOM.render(<Greeting isLogin={true}/>,document.getElementById('root'));
  
</script>
</html>
